<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- {{ }} -插值表达式 （这里面可以绑定响应式数据、做数据逻辑运算、调用函数） -->
        <h1>{{count+1}}</h1>
        <h1>{{count == 0? "男" : "女" }}</h1>
        <h1>{{test()}}</h1>
        <button @click="count=1">按钮</button>
        <h1>文本插值：{{msg}}</h1>

        <!-- v-text:用于文本元素渲染 -->
        <h2 v-text="msg">文本渲染指令</h2>
        <h2 v-text="tag"></h2>
        <!-- v-html：用于文本标签元素渲染 -->
        <h3 v-html="tag"></h3>
        <h3 v-html="msg"></h3>

    </div>
</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue

    createApp({
        setup() {
            const count = ref(0)
            const msg = ref("文本数据")
            const tag = ref("<b>标签元素</b>")

            function test() {
                return " Hello Vue "
            }
            return {
                count,
                test,
                msg,
                tag
            }
        }
    }).mount("#app")
</script>